<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <title>事件处理中心</title>
    <link rel="stylesheet" th:href="@{/frame/vendors/mdi/css/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/frame/vendors/base/vendor.bundle.base.css}">
    <link rel="stylesheet" th:href="@{/frame/vendors/datatables.net-bs4/dataTables.bootstrap4.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}">
</head>
<body>
<div class="container-scroller">
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="navbar-brand-wrapper d-flex justify-content-center">
            <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">
                <a class="navbar-brand brand-logo" th:href="@{/index}">
                    <h1>
                        <span class="display-4" th:text="${session.user.getUserName()}+'欢迎!'"></span>
                    </h1>
                </a>
                <button class="navbar-toggler navbar-toggler align-self-center" data-toggle="minimize" type="button">
                    <span class="mdi mdi-sort-variant"></span>
                </button>
            </div>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
            <ul class="navbar-nav navbar-nav-right">
                <li class="nav-item nav-profile dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="profileDropdown">
                        <img alt="profile" th:src="@{/img/head.jpg}">
                        <span class="nav-profile-name" th:text="${session.user.getUserName()}"></span>
                    </a>
                    <div aria-labelledby="profileDropdown" class="dropdown-menu dropdown-menu-right navbar-dropdown">
                        <a class="dropdown-item" th:href="@{/user/setting}">
                            <i class="mdi mdi-settings text-primary"></i>
                            设置
                        </a>
                        <a class="dropdown-item" th:href="@{/loginout}">
                            <i class="mdi mdi-logout text-primary"></i>
                            登出
                        </a>
                    </div>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" data-toggle="offcanvas"
                    type="button">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>
    <div class="container-fluid page-body-wrapper">
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/index}">
                        <i class="mdi mdi-home menu-icon"></i>
                        <span class="menu-title">主页</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/user/event}">
                        <i class="mdi mdi-view-headline menu-icon"></i>
                        <span class="menu-title">事件中心</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/user/setting}">
                        <i class="mdi mdi-account menu-icon"></i>
                        <span class="menu-title">用户中心</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-lg-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <p class="card-title">突发事件处理中心</p>
                                <div id="event" lay-filter="event"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['layer', 'table'], function () {
        var $ = layui.$
            , layer = layui.layer
            , table = layui.table;
        table.render({
            elem: "#event",
            data: [],
            even: true,
            cellMinWidth: 80,
            skin: 'line',
            cols: [
                [
                    {field: 'id', hide: true}
                    , {field: 'userName', width: '10%', title: '用户名'}
                    , {field: 'carType', width: '10%', title: '车辆类型'}
                    , {field: 'type', width: '15%', title: '事故发生类型', templet: '#type'}
                    , {field: 'emergencyPhone', title: '紧急联系电话', width: '15%', minWidth: 100}
                    , {field: 'phone', width: '15%', sort: true, title: '联系电话'},
                    , {
                    field: 'startTime',
                    width: '25%',
                    title: '事故起始时间', sort: true,
                    templet: function datefomate(value) {
                        if (value == null || value == undefined) {
                            return "";
                        }
                        var date = new Date(parseInt(value.startTime));

                        Y = date.getFullYear(),
                            m = date.getMonth() + 1,
                            d = date.getDate(),
                            H = date.getHours(),
                            i = date.getMinutes(),
                            s = date.getSeconds();
                        return Y + '年' + m + '月' + d + '日' + " " + H + '时' + i + '分' + s + "秒";
                    }
                }, {title: "操作", fixed: 'right', width: '10%', align: 'center', toolbar: '#toolBar'}

                ]
            ]
        })
        let ws = new WebSocket("ws://" + window.location.host + "/Events");
        ws.onopen = () => {
            ws.send("hello");
        };
        ws.onmessage = (Msg) => {
            var obj = JSON.parse(Msg.data);
            table.reload("event", {
                elem: "#event",
                data: obj.data
            })
        }
        table.on('tool(event)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    layer.confirm('事件处理成功了吗', function (index) {
                        $.ajax({
                            type: 'post',
                            url: '/user/eventend',
                            data: {'id': data.id},
                            dataType: "json",
                            success: function (Msg) {
                                if (Msg.code != 200) {
                                    layer.msg(Msg.msg);
                                } else {
                                    layer.msg("[提示]事件处理完成");
                                }
                            }
                        })
                        obj.del();
                        layer.close(index);

                    });
                }
            }
        );
    })
</script>
<script id="toolBar" type="text/html">
    <a class="layui-btn-sm layui-btn-primary layui-border-blue" lay-event="detail">查看</a>
</script>
<script id="type" type="text/html">
    {{#  if(d.type == "Fi") {  }}
    火灾
    {{#  } else if(d.type == "hum") {  }}
    湿度过高
    {{#  } else if(d.type == "tem") {  }}
    温度过高
    {{#  }  }}
</script>
<script th:src="@{/frame/vendors/base/vendor.bundle.base.js}"></script>
<script th:src="@{/frame/vendors/chart.js/Chart.min.js}"></script>
<script th:src="@{/frame/vendors/datatables.net/jquery.dataTables.js}"></script>
<script th:src="@{/frame/vendors/datatables.net-bs4/dataTables.bootstrap4.js}"></script>
<script th:src="@{/js/off-canvas.js}"></script>
<script th:src="@{/js/hoverable-collapse.js}"></script>
<script th:src="@{/js/template.js}"></script>
<script th:src="@{/js/dashboard.js}"></script>
<script th:src="@{/js/data-table.js}"></script>
<script th:src="@{/js/jquery.dataTables.js}"></script>
<script th:src="@{/js/dataTables.bootstrap4.js}"></script>
</body>

</html>

